{% extends "base.html" %}
{% block head %}
    {{ super() }}
    <style type="text/css">
        .guest-page {
            display: block;
            text-align: center;
            height: 100%;
            padding-top: calc(50vh - 80px);
        }

        .user-page {
            display: none;
            text-align: center;
            height: 100%;
            padding-top: calc(50vh - 80px);
        }

        #div-mid .midbut {
            width: 20%;
            height: 80px;
            font-size: 28px;
            font-weight: bold;
            margin: 0 10px 0 10px;
            transition-duration: 0.3s;
            line-height: 70px;
        }

        #div-mid .midbut:hover {
            border: 2px solid white;
        }
    </style>

    {#    <script src='https://www.google.com/recaptcha/api.js' async defer></script>#}

    <script src="https://www.recaptcha.net/recaptcha/api.js"></script>
{% endblock %}

{% block maindiv %}
    <div class="user-page">
        <a class="btn btn-primary midbut" data-toggle="modal" data-target="#confirm-add">加入班级</a>
        <a class="btn btn-primary midbut" onclick="javascript:window.location.href='rank.html'">排行榜</a>
        <a class="btn btn-primary midbut" href="{{ url_for('web.classes') }}">我的班级</a>
    </div>

    <div class="modal fade" id="confirm-add" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    加入班级
                </div>
                <div class="modal-body">
                    <form id="form_data" role="form" class="form-horizontal">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">班级邀请码</label>
                            <div class="col-sm-6">
                                <input name="invitecode" class="form-control">
                            </div>
                            <div class="col-sm-2">
                                <button type="button" class="checkclass btn btn-block btn-info btn-sm">验证</button>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-10 classblock" style="display: none;
    margin-left: 45px;">
                                <div class="info-box  bg-green">
                                    <span class="info-box-icon ">
                                        <img class="classimg" style="margin-top: -16px" src="" alt="">
                                    </span>

                                    <div class="info-box-content">
                                        <span class="info-box-text  classname">未知</span>
                                        <span class="info-box-number classdescri">未知</span>
                                    </div>
                                    <!-- /.info-box-content -->
                                </div>
                                <!-- /.info-box -->
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class=" btn btn-default cancel" data-dismiss="modal">取消</button>
                    <a class="disabled btn btn-danger btn-ok addclass">确认加入</a>
                </div>
            </div>
        </div>
    </div>
{% endblock %}


{% block touxiang %}
     <div id="user_info">
            <div class="user_avatar" id="crop-avatar">
                <div class="avatar-view">
                    <img src="{{ res.data.avatar_url}}" class="avatar-img" alt="Logo">
                </div>
                <div class="user_avatar_cover">点击编辑头像</div>
            </div>
            <span></span>
            <div class="user_info_panel">
                <div>Lv.126</div>
                <ul>
                    <li>
                        <a>
                            <button type="button">信息修改</button>
                        </a>
                    </li>
                    <li>
                        <a href="{{ url_for('web.logout') }}">
                            <button class="logout"> 注销</button>
                        </a>
                    </li>
                    <li>
                        <a href="{{ url_for('web.logsuc') }}">
                            <button class="logout"> 首页</button>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
{% endblock %}
{% block scripts %}
    {{ super() }}


    <script>
        var issave = false;
        var classid = 0;
        $('#btn-login').css('display', 'none');
        $('#user_info span').css('display', 'block');
        $('#user_info span').text('你好呀,' + {{ res.data.nickname }});
        $('#user_info .user_info_panel div').text('ID:' +{{ res.data.id}});
        $('.user_info_panel').css('display', 'block');
        $('.user_avatar').on('mouseover', function () {
            $('.user_avatar_cover').css('display', 'block');
        }).css('cursor', 'pointer')
        $('.user_avatar').on('mouseout', function () {
            $('.user_avatar_cover').css('display', 'none');
        });

        $('.user_avatar').css('pointer-events', 'auto');
        $('.guest-page').css('display', 'none');
        $('.user-page').css('display', 'block');
        $('.avatar-img').attr('src', "{{ res.data.avatar_url}}");

        $('#confirm-add').on('show.bs.modal', function (e) {

        });
        $('.cancel').click(function () {
            issave = false;
            $('input[name="invitecode"]').val("");
            $('.addclass').addClass("disabled");
            $('.classblock').css('display', 'none');
        });
        $('.checkclass').click(function () {
            var invitecode = $('input[name="invitecode"]').val();
            invitecode = $.trim(invitecode);
            if (invitecode.length !== 6) {
                $('.top-right').notify({
                    message: "邀请码需要6位字母或数字组合",
                    type: custom[1]
                }).show();
                return
            }

            $.post("/class/check", {invitecode: invitecode}, function (result) {
                console.log(result)
                if (result.succeed) {
                    $('.top-right').notify({
                        message: {text: result.message},
                        type: custom[1]
                    }).show();
                    classid = result.class.cid;
                    issave = true;
                    $('.classname').text(result.class.cname);
                    $('.classdescri').text(result.class.cdes);
                    $('.classimg').attr("src", result.class.classimg);
                    $('.classblock').css('display', 'block');
                    $('.addclass').removeClass("disabled");
                } else {
                    $('.top-right').notify({
                        message: {text: result.message},
                        type: custom[1]
                    }).show();
                }
            }, 'json');
        });


        $('.addclass').click(function () {

            if (issave) {
                $.post("/class/add", {classid: classid}, function (result) {
                    console.log(result);
                    if (result.succeed) {
                        $('.top-right').notify({
                            message: {text: result.message},
                            type: custom[1]
                        }).show();
                        $("#confirm-add").modal("hide");
                        $('.addclass').addClass("disabled");
                        $('input[name="invitecode"]').val("");
                        $('.classblock').css('display', 'none');
                        issave = false;
                    } else {
                        $('.top-right').notify({
                            message: {text: result.message},
                            type: custom[1]
                        }).show();
                    }
                }, 'json');
            } else {
                $('.top-right').notify({
                    message: "未选择班级",
                    type: custom[1]
                }).show();
            }
        });
    </script>


{% endblock %}